"use client";

import { createContext, useContext, useState } from "react";

// 创建国际化上下文
const I18nContext = createContext();

/**
 * 国际化提供者组件
 * 为整个应用提供多语言支持
 * @param {Object} props - 组件属性
 * @param {React.ReactNode} props.children - 子组件
 * @param {Object} props.initialDictionary - 初始字典数据
 */
export function I18nProvider({ children, initialDictionary }) {
  const [dictionary, setDictionary] = useState(initialDictionary);

  /**
   * 翻译函数
   * @param {string} key - 翻译键
   * @param {Object} params - 参数对象，用于替换模板变量
   * @returns {string} 翻译后的文本
   */
  const t = (key, params = {}) => {
    let translation = dictionary[key] || key;
    // 替换模板变量，如 {{name}} -> 实际值
    Object.keys(params).forEach((param) => {
      const regex = new RegExp(`{{${param}}}`, "g");
      translation = translation.replace(regex, params[param]);
    });
    return translation;
  };

  return (
    <I18nContext.Provider value={{ dictionary, setDictionary, t }}>
      {children}
    </I18nContext.Provider>
  );
}

/**
 * 使用国际化上下文的 Hook
 * @returns {Object} 包含字典、设置函数和翻译函数的对象
 * @throws {Error} 如果不在 I18nProvider 内部使用
 */
export function useI18n() {
  const context = useContext(I18nContext);
  if (context === undefined) {
    throw new Error("useI18n must be used within an I18nProvider");
  }
  return context;
}
